<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      .x-green {
        background-color: #1B8D1D;
      }
      .x-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .x-avatar img {
        width: 100px;
        border-radius: 50%;
      }
      .x-avatar span {
        height: 100px;
        line-height: 100px;
        display: block;
        color: #FFF;
        text-align: center
      }
    </style>
  </head>

  <body>
    <div class="mui-content">
      <div class="x-avatar x-green" style="margin: 30px auto;">
        <span style="font-size: xx-large;">BRM</span>
      </div>
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label>账号</label>
          <input v-model="account" type="text" placeholder="请输入账号" class="mui-input-clear mui-input" />
        </div>
        <div class="mui-input-row">
          <label>密码</label>
          <input v-model="password" type="password" placeholder="请输入密码" class="mui-input-clear mui-input" />
        </div>
      </form>
      <div class="mui-input-group">
        <ul class="mui-table-view mui-table-view-chevron">
          <li class="mui-table-view-cell">
            自动登录
            <div v-on="toggle:settings.autoLogin=$event.detail.isActive" v-class="mui-active: settings.autoLogin" vue-model="settings.autoLogin" class="mui-switch">
              <div class="mui-switch-handle"></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="mui-content-padded">
        <button v-on="tap:login" id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
        <div class="link-area">
          <a v-on="tap:goTo({url:'pages/reg.html',id:'reg',showInTime:true})">注册账号</a>
          <span class="spliter">|</span>
          <a v-on="tap:goTo({url:'pages/forget_password.html',id:'forgetPassword',showInTime:true})">忘记密码</a>
        </div>
      </div>
      <div class="mui-content-padded oauth-area">
      </div>
    </div>
    <script src="pre.installed.js"></script>
    <script src="js/lodash.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="app/init.js"></script>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript">
      localStorage['$startTime'] = Date.now();
    </script>
    <script src="js/vue.min.js"></script>
    <script src="js/mui.enterfocus.js"></script>
    <script src="app/vue-html5.js"></script>
    <script src="js/app.js"></script>
    <script src="app/x.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      localStorage['setting:host'] = 'http://192.168.3.6:3001';
      localStorage['setting:apiUrl'] = 'http://192.168.3.6:3006/api/';
      sessionStorage.account = 'wwx';
      (function($, window, document, app, Vue, vm) {
        window.vm = new Vue.PageVm({
          el: '.mui-content',
          name: 'page login',
          data: function() {
            return {
              lauchFlag: localStorage.lauchFlag,
              account: '15068729212',
              password: 'password',
              settings: {
                autoLogin: localStorage['setting:autoLogin'],
                gestures: localStorage['setting:gestures'],
              },
              state: {
                token: '',
              },
            };
          },
          computed: {},
          watch: {
            'settings.autoLogin': function(val) {
              localStorage['setting:autoLogin'] = val;
            }
          },
          plusReady: function() {
            var self = this; //读取本地存储，检查是否为首次启动
            if (self.lauchFlag) {
              self.state.token = localStorage['state:token'];
              if (self.settings.autoLogin && self.state.token && self.settings.gestures) {
                //锁屏页面
                $.goTo({
                  url: 'pages/unlock.html',
                  id: 'pages/unlock',
                });
                self.initApp();
                self.preload({
                  timeout: 50
                });
              } else if (self.settings.autoLogin && self.state.token) {
                self.preload({
                  callbackTimeout: 100,
                  callback: function() {
                    Vue.preload({}, {
                      url: 'pages/main.html',
                      id: 'main'
                    })
                    self.initApp();
                    self.goTo({
                      url: 'pages/main.html',
                      id: 'main',
                      autoShow: false,
                      show: {
                        aniShow: 'pop-in'
                      },
                    });
                  }
                })
              } else {
                self.preload({
                  timeout: 50,
                  callback: function() {
                    self.initApp();
                    self.oauthLogin();
                  }
                })
              }
            } else {
              self.showGuide();
              self.installPreApps();
            }
          },
          attached: function() {
            $.init({
              statusBarBackground: '#f7f7f7'
            });
            $.enterfocus('form input', function() {
              $.trigger(loginButton, 'tap');
            });
          },
          events: {
            'preload:main': function() {
              Vue.preload({}, {
                "id": 'main',
                "url": 'pages/main.html'
              });
            },
            show: function(data) {
              log('show ', JSON.stringify(data));
            }
          },
          filters: {},
          methods: {
            oauthLogin: function() {
              //第三方登录
              var auths = {};
              var oauthArea = document.querySelector('.oauth-area');
              plus.oauth.getServices(function(services) {
                for (var i in services) {
                  var service = services[i];
                  auths[service.id] = service;
                  var btn = document.createElement('div');
                  btn.setAttribute('class', 'oauth-btn');
                  btn.authId = service.id;
                  btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
                    //alert(service.id);
                    //btn.innerText = service.description + "登录";
                  oauthArea.appendChild(btn);
                }
                $(oauthArea).on('tap', '.oauth-btn', function() {
                  var auth = auths[this.authId];
                  var waiting = plus.nativeUI.showWaiting();
                  auth.login(function() {
                    waiting.close();
                    plus.nativeUI.toast("登录认证成功");
                    //alert(JSON.stringify(auth.authResult));
                    auth.getUserInfo(function() {
                      plus.nativeUI.toast("获取用户信息成功：");
                      //alert(JSON.stringify(auth.userInfo));
                      var name = auth.userInfo.nickname || auth.userInfo.name;
                      app.createState(name, function() {
                        $.goTo({
                          url: 'pages/main.html',
                          id: 'main'
                        });
                      });
                    }, function(e) {
                      plus.nativeUI.toast("获取用户信息失败：" + e.message);
                    });
                  }, function(e) {
                    waiting.close();
                    plus.nativeUI.toast("登录认证失败：" + e.message);
                  });
                });
              }, function(e) {
                oauthArea.style.display = 'none';
                plus.nativeUI.toast("获取登录认证失败：" + e.message);
              });
            },
            initApp: function() {
              plus.navigator.closeSplashscreen();
              plus.navigator.setFullscreen(false);
              plus.screen.lockOrientation("portrait-primary");
            },
            // 预加载主页面
            preload: function(options) {
              var self = this;
              var options = options || {
                timeout: 0
              };
              options.callback = options.callback || $.noop;
              setTimeout(function() {
                if (!self.state.token) {
                  Vue.preload({}, {
                    "id": 'reg',
                    "url": 'pages/reg.html'
                  });
                } else {
                  Vue.preload({}, {
                    "id": 'main',
                    "url": 'pages/main.html'
                  });
                }
                setTimeout(function() {
                  options.callback();
                }, options.callbackTimeout || 0)
              }, options.timeout || 0);
            },
            showGuide: function() {
              $.openWindow({
                id: 'guide',
                url: 'pages/guide.html',
                show: {
                  aniShow: 'none'
                },
                waiting: {
                  autoShow: false
                }
              });
              //延迟的原因：优先打开启动导航页面，避免资源争夺
              this.preload({
                timeout: 300
              });
            },
            installPreApps: function() {
              var navs = localStorageJson('navs', [{
                name: "应用",
                icons: "mui-icon mui-icon-pengyouquan",
                href: "app.html"
              }]);
              var menuGroups = localStorageJson('menuGroups', [{
                name: '更多',
                menus: [{
                  name: 'more',
                  icons: 'mui-icon mui-icon-more',
                  href: 'app_list.html'
                }]
              }]);
              var preApps = localStorageJson('pre installed');

              function installApp(fs) {
                if (fs[0]) {
                  window.$app = null;
                  plus.webview.currentWebview().appendJsFile(fs.splice(0, 1)[0]);
                  var il = self.setInterval(function() {
                    if (window.$app) {
                      window.$app.install();
                      installApp(fs);
                      clearInterval(il)
                    }
                  }, 50)
                }
              }
              installApp(preApps);
            },
            login: function() {
              var self = this;
              app.login({
                account: this.account,
                password: this.password
              }, function(err) {
                if (err) {
                  plus.nativeUI.toast(err);
                  return;
                }
                self.goTo({
                  url: 'pages/main.html',
                  id: 'main',
                  timeout: 2000,
                }, {}, function(d) {
                  plus.webview.currentWebview().close();
                });
              });
            }
          },
        });
      })(mui, window, document, app, Vue, window.vm = {});
    </script>
  </body>

</html>